<template>
  <div>
    <el-menu
      :default-active="currentPageName"
      class="el-menu-vertical-demo"

    >
      <template v-for="item in menuList">
        <router-link
          :key="'menuitem' + item.name"
          :to="{name:item.children[0].name}">
          <el-menu-item
            v-if="item.children.length<=1"
            :index="item.children[0].name" >
            <i
              :class="item.children[0].icon"
              v-if="item.children[0].icon"/>
            <span slot="title">{{ item.children[0].title }}</span>
          </el-menu-item>
        </router-link>

        <el-submenu
          :index="item.name"
          :key="item.name"
          v-if="item.children.length>1">
          <template slot="title">
            <i
              :class="item.icon"
              v-if="item.icon"/>
            <span>{{ item.title }}</span>
          </template>
          <router-link
            v-for="child in item.children"
            :key="child.name"
            :to="{name:child.name}">
            <el-menu-item :index="child.name" >
              <i
                :class="child.icon"
                v-if="child.icon"/>
              <span slot="title">{{ child.title }}</span>
            </el-menu-item>
          </router-link>
        </el-submenu>
      </template>
    </el-menu>
  </div>
</template>
<script type="es6">
export default {
  data () {
    return {
    };
  },
  computed: {
    currentPageName () {
      return this.$route.name;
    }
  },
  props: {
    menuList: {
      type: Array,
      default: () => []
    }
  },
  methods: {

  },
  mounted () {

  }
};
</script>
<style lang="less">
    .el-menu{
        border-right: none;
    }
    .el-menu-item.is-active:after {
        content: "";
        position: absolute;
        left: 0px;
        width: 4px;
        height: 50px;
        background: #4da5fd;
    }
    .el-menu-item.is-active{
        color: #333;
        background-color: #ecf5ff;
    }
</style>
